<!-- 泵闸站管理 -->
<style lang="less">
.pump_gate {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    width: 200px;
    display: inline-block;
    margin-left: 20px;
  }
}
.modal-pump {
  .ivu-modal-body {
    float: left;
  }
  .ivu-card-bordered {
    float: left;
    width: 100%;
  }
}
#myMap1 {
  width: 100%;
  height: 200px;
}
#myMap2 {
  width: 100%;
  height: 200px;
}
.smallInput {
  width: 250px !important;
}
.smallInput2 {
  width: 236px !important;
}
.redStar {
  color: red;
  float: right;
  margin-left: 5px;
}
</style>


<template>
  <div class="gate_pump">
    <Tabs @on-click="aa">
      <TabPane label="泵站管理"
               name="泵站管理">
        <div class="pump_gate">
          <Card :bordered="false">
            <p slot="title"
               class="white">更多功能 > <span class="select-font">泵站管理</span>
            </p>
            <div>
              <Button type="primary"
                      @click.native="addPump('1')">新增泵站</Button>
              <Button type="error"
                      @click.native="del1"
                      style="margin-left: 20px">删除泵站</Button>
              <Form :model="searchItem"
                    class="smallForm">
                <Input v-model="searchItem.pumpName"
                       :maxlength="20"
                       style="width:200px;"
                       placeholder="请输入泵站名称"></Input>
              </Form>
              <Button type="info"
                      style="margin-left:20px"
                      @click="getTable('saveType','1')">搜索</Button>
            </div>
          </Card>
          <Table :data="pumpData"
                 @on-selection-change="showSelect"
                 :columns="pumpColumns"
                 stripe></Table>
        </div>
      </TabPane>
      <TabPane label="闸站管理"
               name="闸站管理">
        <div class="pump_gate">
          <Card :bordered="false">
            <p slot="title"
               class="white">更多功能 > <span class="select-font">闸站管理</span>
            </p>
            <div>
              <Button type="primary"
                      @click.native="addPump('2')">新增闸站</Button>
              <Button type="error"
                      @click.native="del1"
                      style="margin-left: 20px">删除闸站</Button>
              <Form :model="searchItem"
                    class="smallForm">
                <Input v-model="searchItem.gateName"
                       style="width:200px;"
                       :maxlength="20"
                       placeholder="请输入闸站名称"></Input>
              </Form>
              <Button type="info"
                      style="margin-left:20px"
                      @click="getTable('2')">搜索</Button>
            </div>
          </Card>
          <Table :data="gateData"
                 @on-selection-change="showSelect"
                 :columns="gateColumns"
                 stripe></Table>
        </div>
      </TabPane>
    </Tabs>
    <Page class="pull-right"
          :total="Page.total"
          :current="Page.current"
          :page-size="Page.pageSize"
          size="small"
          show-total
          @on-change="changePage"></Page>
    <Modal v-model="modal2"
           width="360">
      <p slot="header"
         style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>确认删除这个泵闸站？</p>
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error"
                size="large"
                long
                @click="del">删除</Button>
      </div>
    </Modal>
    <Modal v-model="pumpModal"
           width="800"
           class="modal-pump"
           :mask-closable="false">
      <div slot="header">{{updateTitle}}</div>
      <Form :model="formItem"
            :label-width="120">
        <i-col span="12">
          <Form-item label="站号"
                     prop="station_no">
            <Input v-model="formItem.station_no"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="请输入站号"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="站名"
                     prop="station_name">
            <Input v-model="formItem.station_name"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="请输入站名"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="片区"
                     prop="area_name">
            <Select v-model="formItem.area_name"
                    clearable
                    style="width:250px">
              <Option v-for="item in areaName"
                      :value="item.name"
                      :key="item.name">{{ item.name }}</Option>
            </Select>
            <span class="redStar">*</span>
          </Form-item>
          <Form-item label="所在街镇"
                     prop="town">
            <Input v-model="formItem.town"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="请输入街镇"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="建设时间"
                     prop="rebuild_time">
            <Date-picker type="date"
                         placeholder="请选择建设时间"
                         class="smallInput"
                         format="yyyy-MM-dd"
                         @on-change="change3"></Date-picker><span class="redStar">*</span>
          </Form-item>
          <Form-item label="历史最高水位"
                     prop="his_level">
            <Input v-model="formItem.his_level"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="历史最高水位"></Input>
          </Form-item>
          <Form-item label="历史最高水位时间"
                     prop="his_level_date">
            <Date-picker type="date"
                         placeholder="请选择建设时间"
                         class="smallInput"
                         format="yyyy-MM-dd"
                         @on-change="change4"></Date-picker><span class="redStar">*</span>
          </Form-item>
          <Form-item label="突变水位"
                     prop="abrupt_level">
            <Input v-model="formItem.abrupt_level"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="突变水位"></Input><span class="redStar">*</span>
          </Form-item>
        </i-col>
        <i-col span="12">
          <Form-item label="站点类型"
                     prop="Stion_type">
            <Select v-model="formItem.Stion_type"
                    clearable
                    style="width:250px">
              <Option v-for="item in stionType"
                      :value="item.name"
                      :key="item.name">{{ item.name }}</Option>
            </Select>
            <span class="redStar">*</span>
          </Form-item>
          <Form-item label="河流"
                     prop="river">
            <Input v-model="formItem.river"
                   :maxlength="16"
                   placeholder="请输入河流"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="所在堤围"
                     prop="dick_name">
            <Input v-model="formItem.dick_name"
                   :maxlength="16"
                   placeholder="请输入堤围"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="总装机容量（kw）"
                     prop="installed_capacity">
            <Input v-model="formItem.installed_capacity"
                   :maxlength="16"
                   placeholder="请输入河流"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="机组台数"
                     prop="pump_count">
            <Input v-model="formItem.pump_count"
                   :maxlength="16"
                   placeholder="请输入机组台数"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="水泵口径（单台）"
                     prop="pump_caliber">
            <Input v-model="formItem.pump_caliber"
                   :maxlength="16"
                   placeholder="水泵口径（单台）"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="排水-受益面积(亩)"
                     prop="drain_area">
            <Input v-model="formItem.drain_area"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="排水-受益面积(亩)"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="灌溉-受益面积(亩)"
                     prop="irrigation_area">
            <Input v-model="formItem.irrigation_area"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="灌溉-受益面积(亩)"></Input>
          </Form-item>
        </i-col>
        <i-col span="24">
          <Card>
            <p slot="title">常态流程</p>
            <i-col span="12">
              <Form-item label="常态内江警戒水位"
                         prop="normal_alarm_level_in">
                <Input v-model="formItem.normal_alarm_level_in"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="常态内江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="常态外江警戒水位"
                         prop="normal_alarm_level_out">
                <Input v-model="formItem.normal_alarm_level_out"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="常态外江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item label="常态内江超限水位"
                         prop="normal_over_level_in">
                <Input v-model="formItem.normal_over_level_in"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="常态内江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="常态外江超限水位"
                         prop="normal_over_level_in">
                <Input v-model="formItem.normal_over_level_out"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="常态外江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
          </Card>
        </i-col>
        <i-col span="24">
          <Card>
            <p slot="title">排水流程</p>
            <i-col span="12">
              <Form-item label="排水内江警戒水位"
                         prop="drain_alarm_level_in">
                <Input v-model="formItem.drain_alarm_level_in"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="排水内江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="排水外江警戒水位"
                         prop="drain_alarm_level_out">
                <Input v-model="formItem.drain_alarm_level_out"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="排水外江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item label="排水内江超限水位"
                         prop="drain_over_level_in">
                <Input v-model="formItem.drain_over_level_in"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="排水内江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="排水外江江超限水位"
                         prop="drain_over_level_out">
                <Input v-model="formItem.drain_over_level_out"
                       :maxlength="16"
                       class="smallInput2"
                       placeholder="排水外江江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
          </Card>
        </i-col>
        <i-col span="24">
          <i-col span="12">
            <Form-item label="经度"
                       prop="lng">
              <Input v-model="formItem.lng"
                     placeholder="经度"
                     readonly
                     class="smallInput"></Input><span class="redStar">*</span>
            </Form-item>
          </i-col>
          <i-col span="12">
            <Form-item label="纬度"
                       prop="lat">
              <Input v-model="formItem.lat"
                     placeholder="纬度"
                     readonly
                     class="smallInput"></Input><span class="redStar">*</span>
            </Form-item>
          </i-col>
        </i-col>
        <i-col span="24">
          <div id="myMap1">

          </div>
        </i-col>
      </Form>
      <div slot="footer">
        <Button v-if="btnSave"
                type="primary"
                @click="ok('1')">保存</Button>
        <Button v-if="!btnSave"
                type="primary"
                @click="changePump('1')">修改</Button>
        <Button @click="cancel('1')">取消</Button>
      </div>
    </Modal>
    <Modal v-model="gateModal"
           width="800"
           class="modal-pump">
      <div slot="header">{{updateTitle}}</div>
      <Form :model="gateItem"
            :label-width="120">
        <i-col span="12">
          <Form-item label="站号"
                     prop="id">
            <Input v-model="gateItem.id"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="请输入站号"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="站名"
                     prop="sluicegate_name">
            <Input v-model="gateItem.sluicegate_name"
                   :maxlength="16"
                   class="smallInput"
                   placeholder="请输入站名"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="河流"
                     prop="river">
            <Input v-model="gateItem.river"
                   class="smallInput"
                   :maxlength="16"
                   placeholder="请输入河流"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="片区"
                     prop="area_name">
            <Select v-model="gateItem.area_name"
                    clearable
                    style="width:250px">
              <Option v-for="item in areaName"
                      :value="item.name"
                      :key="item.name">{{ item.name }}</Option>
            </Select>
            <span class="redStar">*</span>
          </Form-item>
          <Form-item label="所在街镇"
                     prop="town">
            <Input v-model="gateItem.town"
                   class="smallInput"
                   :maxlength="16"
                   placeholder="请输入街镇"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="所在堤围"
                     prop="dick_name">
            <Input v-model="gateItem.dick_name"
                   class="smallInput"
                   :maxlength="16"
                   placeholder="请输入堤围"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="堤围桩号"
                     prop="stake_no">
            <Input v-model="gateItem.stake_no"
                   class="smallInput"
                   :maxlength="16"
                   placeholder="请输入堤围桩号"></Input>
          </Form-item>
          <Form-item label="建设时间"
                     prop="rebuild_time">
            <Date-picker type="date"
                         placeholder="请选择建设时间"
                         class="smallInput"
                         format="yyyy-MM-dd"
                         @on-change="change"></Date-picker><span class="redStar">*</span>
          </Form-item>
          <Form-item label="捍卫面积"
                     prop="defence_area">
            <Input v-model="gateItem.defence_area"
                   class="smallInput"
                   :maxlength="16"
                   placeholder="请输入捍卫面积"></Input>
          </Form-item>
          <Form-item label="闸门类型"
                     prop="sluicegate_type">
            <Select v-model="gateItem.sluicegate_type"
                    clearable
                    style="width:250px">
              <Option v-for="item in sluicegateType"
                      :value="item.value"
                      :key="item.name">{{ item.name }}</Option>
            </Select>
            <span class="redStar">*</span>
          </Form-item>
          <Form-item label="历史最高水位"
                     prop="his_level">
            <Input v-model="gateItem.his_level"
                   class="smallInput"
                   :maxlength="16"
                   placeholder="历史最高水位"></Input>
          </Form-item>
          <Form-item label="历史最高水位时间"
                     prop="his_level_date">
            <Date-picker type="date"
                         placeholder="请选择建设时间"
                         class="smallInput"
                         format="yyyy-MM-dd"
                         @on-change="change2"></Date-picker>
          </Form-item>
        </i-col>
        <i-col span="12">
          <Form-item label="设计流量"
                     prop="flow">
            <Input v-model="gateItem.flow"
                   placeholder="请输入设计流量"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="设计启闭水头差"
                     prop="waterhead">
            <Input v-model="gateItem.waterhead"
                   placeholder="设计启闭水头差"
                   :maxlength="16"
                   class="smallInput"></Input>
          </Form-item>
          <Form-item label="闸门形式及材料"
                     prop="gate_material">
            <Input v-model="gateItem.gate_material"
                   placeholder="闸门形式及材料"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="闸门启闭形式"
                     prop="gate_form">
            <Input v-model="gateItem.gate_form"
                   placeholder="闸门启闭形式"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="闸底板高程"
                     prop="board_height">
            <Input v-model="gateItem.board_height"
                   placeholder="闸底板高程"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="孔数"
                     prop="holes">
            <Input v-model="gateItem.holes"
                   placeholder="孔数"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="每孔净宽(m)"
                     prop="hole_width">
            <Input v-model="gateItem.hole_width"
                   placeholder="每孔净宽(m)"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="每孔净宽(m)"
                     prop="hole_hight">
            <Input v-model="gateItem.hole_hight"
                   placeholder="孔高"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="闸室总长(m)"
                     prop="gateroom_length">
            <Input v-model="gateItem.gateroom_length"
                   placeholder="闸室总长(m)"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="船室净宽(m)"
                     prop="shiproom_width">
            <Input v-model="gateItem.shiproom_width"
                   placeholder="船室净宽(m)"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="船室总长(m)"
                     prop="shiproom_length">
            <Input v-model="gateItem.shiproom_length"
                   placeholder="船室总长(m)"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
          <Form-item label="突变水位"
                     prop="abrupt_level">
            <Input v-model="gateItem.abrupt_level"
                   placeholder="突变水位"
                   :maxlength="16"
                   class="smallInput"></Input><span class="redStar">*</span>
          </Form-item>
        </i-col>
        <i-col span="24">
          <Card>
            <p slot="title">常态流程</p>
            <i-col span="12">
              <Form-item label="常态内江警戒水位"
                         prop="normal_alarm_level_in">
                <Input v-model="gateItem.normal_alarm_level_in"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="常态内江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="常态外江警戒水位"
                         prop="normal_alarm_level_out">
                <Input v-model="gateItem.normal_alarm_level_out"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="常态外江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item label="常态内江超限水位"
                         prop="normal_over_level_in">
                <Input v-model="gateItem.normal_over_level_in"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="常态内江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="常态外江超限水位"
                         prop="normal_over_level_out">
                <Input v-model="gateItem.normal_over_level_out"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="常态外江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
          </Card>
        </i-col>
        <i-col span="24">
          <Card>
            <p slot="title">排水流程</p>
            <i-col span="12">
              <Form-item label="排水内江警戒水位"
                         prop="drain_alarm_level_in">
                <Input v-model="gateItem.drain_alarm_level_in"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="排水内江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="排水外江警戒水位"
                         prop="drain_alarm_level_out">
                <Input v-model="gateItem.drain_alarm_level_out"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="排水外江警戒水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item label="排水内江超限水位"
                         prop="drain_over_level_in">
                <Input v-model="gateItem.drain_over_level_in"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="排水内江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
              <Form-item label="排水外江江超限水位"
                         prop="drain_over_level_out">
                <Input v-model="gateItem.drain_over_level_out"
                       class="smallInput2"
                       :maxlength="16"
                       placeholder="排水外江江超限水位"></Input><span class="redStar">*</span>
              </Form-item>
            </i-col>
          </Card>
        </i-col>
        <i-col span="24">
          <i-col span="12">
            <Form-item label="经度"
                       prop="lng">
              <Input v-model="gateItem.lng"
                     readonly
                     placeholder="经度"
                     class="smallInput"></Input><span class="redStar">*</span>
            </Form-item>
          </i-col>
          <i-col span="12">
            <Form-item label="纬度"
                       prop="lat">
              <Input v-model="gateItem.lat"
                     readonly
                     placeholder="纬度"
                     class="smallInput"></Input><span class="redStar">*</span>
            </Form-item>
          </i-col>
        </i-col>
        <i-col span="24">
          <div id="myMap2">

          </div>
        </i-col>
      </Form>
      <div slot="footer">
        <Button v-if="btnSave"
                type="primary"
                @click="ok('2')">保存</Button>
        <Button v-if="!btnSave"
                type="primary"
                @click="changePump('2')">修改</Button>
        <Button @click="cancel('2')">取消</Button>
      </div>
    </Modal>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
let map = null;
let notionLayer = null;
let xiqiao_riverLayer = null;
let waterNetLayer = null;
export default {
  data() {
    return {
      urlPumpList: '/bsi/bsipumpstation/list',
      urlPumpNew: '/bsi/bsipumpstation/new',
      urlPumpDel: '/bsi/bsipumpstation/del',
      urlPumpEdit: '/bsi/bsipumpstation/edit',
      urlGateList: '/bsi/bsisluicegate/list',
      urlGateNew: '/bsi/bsisluicegate/new',
      urlGateDel: '/bsi/bsisluicegate/del',
      urlGateEdit: '/bsi/bsisluicegate/edit',
      searchItem: {
        pumpName: '',
        gateName: '',
      },
      gateItem: {},
      formItem: {},
      pumpData: [],
      gateData: [],
      pumpColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '站号',
          key: 'station_no',
        },
        {
          title: '站名',
          key: 'station_name',
        },
        {
          title: '机组台数',
          key: 'pump_count',
        },
        {
          title: '内江超限',
          key: 'normal_over_level_in',
        },
        {
          title: '外江超限',
          key: 'normal_over_level_out',
        },
        {
          title: '内江警戒',
          key: 'normal_alarm_level_in',
        },
        {
          title: '外江警戒',
          key: 'normal_alarm_level_out',
        },
        {
          title: '突变水位',
          key: 'abrupt_level',
        },
        {
          title: '所属围',
          key: 'area_name',
        },
        {
          title: '堤围桩号',
          key: 'stake_no',
        },
        {
          title: '总开机流量',
          key: 'total_flow',
        },
        {
          title: '用户操作',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row, '1');
                    },
                  },
                },
                '编辑'
              ),
            ]);
          },
        },
      ],
      gateColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '闸号',
          key: 'id',
        },
        {
          title: '涵闸名称',
          key: 'sluicegate_name',
        },
        {
          title: '内江超限',
          key: 'normal_over_level_in',
        },
        {
          title: '外江超限',
          key: 'normal_over_level_out',
        },
        {
          title: '内江警戒',
          key: 'normal_alarm_level_in',
        },
        {
          title: '外江警戒',
          key: 'normal_alarm_level_out',
        },
        {
          title: '突变水位',
          key: 'abrupt_level',
        },
        {
          title: '所属围',
          key: 'area_name',
        },
        {
          title: '堤围桩号',
          key: 'stake_no',
        },
        {
          title: '总开机流量',
          key: 'flow',
        },
        {
          title: '用户操作',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row, '2');
                    },
                  },
                },
                '编辑'
              ),
            ]);
          },
        },
      ],
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      saveType: '1',
      actionPage: '1',
      selectData: [],
      modal2: false,
      pumpModal: false,
      gateModal: false,
      updateTitle: '',
      btnSave: false,
      areaName: [
        {
          name: '大栅片',
        },
        {
          name: '西岸片',
        },
        {
          name: '桑园片',
        },
      ],
      stionType: [
        {
          name: '电排站',
        },
        {
          name: '泵站',
        },
      ],
      sluicegateType: [
        {
          name: '中型水闸',
          value: 1,
        },
        {
          name: '中型船闸',
          value: 2,
        },
        {
          name: '小型窦闸',
          value: 3,
        },
        {
          name: '电排站穿堤涵管',
          value: 4,
        },
      ],
    };
  },
  methods: {
    del1() {
      if (this.selectData.length > 0) {
        this.modal2 = true;
      } else {
        this.$Message.warning('请选择站点');
      }
    },
    getTable(type = '1', page = 1) {
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {},
        },
        url: this.urlPumpList,
        token: storage.session.get('token'),
        success: res => {
          this.pumpData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.searchItem.pumpName !== '') {
        params.data.searchValue.station_name = `${this.searchItem.pumpName}|#|like`;
      }
      if (type === '2') {
        params.url = this.urlGateList;
        if (this.searchItem.gateName !== '') {
          params.data.searchValue.sluicegate_name = `${this.searchItem.gateName}|#|like`;
        }
        params.success = res => {
          this.gateData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        };
      }
      ajaxPost(params);
    },
    aa(name) {
      this.searchItem = {
        gateName: '',
        pumpName: '',
      };
      this.selectData = [];
      if (name === '泵站管理') {
        this.saveType = '1';
        this.getTable();
      } else if (name === '闸站管理') {
        this.saveType = '2';
        this.getTable('2');
      }
    },
    changePage(page) {
      this.getTable(this.saveType, page);
      this.actionPage = page;
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    del() {
      let params = {};
      let _ids = '';
      for (let i = 0; i < this.selectData.length; i++) {
        if (i == this.selectData.length - 1) {
          _ids += this.selectData[i]._id;
        } else {
          _ids += `${this.selectData[i]._id},`;
        }
      }
      params.data = {
        _ids,
      };
      if (this.saveType === '1') {
        params.url = this.urlPumpDel;
      } else if (this.saveType === '2') {
        params.url = this.urlGateDel;
      }
      params.token = storage.session.get('token');
      params.success = res => {
        if (res.data.code == '0000') {
          this.$Loading.finish();
          this.$Message.success({
            content: '删除成功',
          });
          this.selectData = [];
          this.modal2 = false;
          this.getTable(this.saveType, this.actionPage);
        } else {
          this.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    addPump(type = '1') {
      let that = this;
      this.btnSave = true;
      if (type === '1') {
        this.formItem = {
          station_no: '',
          area_name: '',
          pump_count: '',
          station_name: '',
          town: '',
          rebuild_time: '',
          his_level: '',
          his_level_date: '',
          abrupt_level: '',
          Stion_type: '',
          river: '',
          dick_name: '',
          installed_capacity: '',
          pump_caliber: '',
          drain_area: '',
          irrigation_area: '',
          normal_alarm_level_in: '',
          normal_alarm_level_out: '',
          normal_over_level_in: '',
          normal_over_level_out: '',
          drain_alarm_level_in: '',
          drain_alarm_level_out: '',
          drain_over_level_in: '',
          drain_over_level_out: '',
          lat: '',
          lng: '',
        };
        this.pumpModal = true;
        var myMap1 = document.getElementById('myMap1');
        myMap1.innerHTML = '';
        xiqiao_riverLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/xiqiao/xiqiao_small_river_partial/MapServer',
          }),
        });
        // 镇街名layer
        notionLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/notation/MapServer',
          }),
        });
        // 水网layer
        waterNetLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/guangdong_waterbody_entire/MapServer',
          }),
        });
        setTimeout(function () {
          map = new ol.Map({
            target: myMap1,
            layers: [waterNetLayer, notionLayer, xiqiao_riverLayer],
            view: new ol.View({
              center: [112.94836962890625, 22.948907702636717],
              zoom: 13,
              maxZoom: 19,
              minZoom: 3,
              projection: 'EPSG:4326',
              extent: [
                109.6820068359375,
                20.264282226562504,
                116.8670654296875,
                25.3729248046875,
              ],
            }),
            controls: ol.control.defaults({
              attribution: false,
            }),
          });
          map.on('singleclick', evt => {
            let logo = document.getElementsByClassName(
              'ol-overlaycontainer'
            )[0];
            logo.innerHTML = '';
            console.log(evt.coordinate[0], evt.coordinate[1]);
            that.formItem.lng = evt.coordinate[0];
            that.formItem.lat = evt.coordinate[1];
            let overImg = document.createElement('img');
            overImg.setAttribute('src', '/static/img/gis1.png');
            let img_layer = new ol.Overlay({
              element: overImg,
              stopEvent: false,
              position: [evt.coordinate[0], evt.coordinate[1]],
            });
            map.addOverlay(img_layer);
          });
        }, 500);
      } else if (type === '2') {
        this.gateItem = {
          id: '',
          sluicegate_name: '',
          town: '',
          rebuild_time: '',
          area_name: '',
          his_level: '',
          his_level_date: '',
          abrupt_level: '',
          sluicegate_type: '',
          river: '',
          dick_name: '',
          normal_alarm_level_in: '',
          normal_alarm_level_out: '',
          normal_over_level_in: '',
          normal_over_level_out: '',
          drain_alarm_level_in: '',
          drain_alarm_level_out: '',
          drain_over_level_in: '',
          drain_over_level_out: '',
          lat: '',
          lng: '',
          stake_no: '',
          defence_area: '',
          flow: '',
          waterhead: '',
          gate_material: '',
          gate_form: '',
          board_height: '',
          holes: '',
          hole_width: '',
          hole_hight: '',
          gateroom_length: '',
          shiproom_width: '',
          shiproom_length: '',
        };
        this.gateModal = true;
        var myMap1 = document.getElementById('myMap2');
        myMap1.innerHTML = '';
        xiqiao_riverLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/xiqiao/xiqiao_small_river_partial/MapServer',
          }),
        });
        // 镇街名layer
        notionLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/notation/MapServer',
          }),
        });
        // 水网layer
        waterNetLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/guangdong_waterbody_entire/MapServer',
          }),
        });
        setTimeout(function () {
          map = new ol.Map({
            target: myMap1,
            layers: [waterNetLayer, notionLayer, xiqiao_riverLayer],
            view: new ol.View({
              center: [112.94836962890625, 22.948907702636717],
              zoom: 13,
              maxZoom: 19,
              minZoom: 3,
              projection: 'EPSG:4326',
              extent: [
                109.6820068359375,
                20.264282226562504,
                116.8670654296875,
                25.3729248046875,
              ],
            }),
            controls: ol.control.defaults({
              attribution: false,
            }),
          });
          map.on('singleclick', evt => {
            let logo = document.getElementsByClassName(
              'ol-overlaycontainer'
            )[0];
            logo.innerHTML = '';
            console.log(evt.coordinate[0], evt.coordinate[1]);
            that.gateItem.lng = evt.coordinate[0];
            that.gateItem.lat = evt.coordinate[1];
            let overImg = document.createElement('img');
            overImg.setAttribute('src', '/static/img/gis1.png');
            let img_layer = new ol.Overlay({
              element: overImg,
              stopEvent: false,
              position: [evt.coordinate[0], evt.coordinate[1]],
            });
            map.addOverlay(img_layer);
          });
        }, 500);
      }
    },
    cancel(type) {
      if (type === '1') {
        this.pumpModal = false;
      } else if (type === '2') {
        this.gateModal = false;
      }
    },
    change(data) {
      this.gateItem.rebuild_time = data;
    },
    change2(data) {
      this.gateItem.his_level_date = data;
    },
    change3(data) {
      this.formItem.rebuild_time = data;
    },
    change4(data) {
      this.formItem.his_level_date = data;
    },
    ok(type) {
      let params = {
        data: this.formItem,
        url: this.urlPumpNew,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.pumpModal = false;
            this.getTable('1', this.actionPage);
            this.$Message.success({
              content: '新增成功',
            });
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      if (type === '2') {
        params.data = this.gateItem;
        params.url = this.urlGateNew;
        params.success = res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.gateModal = false;
            this.getTable('2', this.actionPage);
            this.$Message.success({
              content: '新增成功',
            });
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        };
      }
      ajaxPost(params);
    },
    edit(row, type) {
      let that = this;
      this.btnSave = false;
      if (type === '1') {
        var myMap1 = document.getElementById('myMap1');
        myMap1.innerHTML = '';
        this.formItem = row;
        this.pumpModal = true;
        let lat = row.lat;
        let lng = row.lng;
        xiqiao_riverLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/xiqiao/xiqiao_small_river_partial/MapServer',
          }),
        });
        // 镇街名layer
        notionLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/notation/MapServer',
          }),
        });
        // 水网layer
        waterNetLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/guangdong_waterbody_entire/MapServer',
          }),
        });

        setTimeout(function () {
          map = new ol.Map({
            target: myMap1,
            layers: [waterNetLayer, notionLayer, xiqiao_riverLayer],
            view: new ol.View({
              center: [lng, lat],
              zoom: 13,
              maxZoom: 19,
              minZoom: 3,
              projection: 'EPSG:4326',
              extent: [
                109.6820068359375,
                20.264282226562504,
                116.8670654296875,
                25.3729248046875,
              ],
            }),
            controls: ol.control.defaults({
              attribution: false,
            }),
          });
          let overImg = document.createElement('img');
          overImg.setAttribute('src', '/static/img/gis1.png');
          let img_layer = new ol.Overlay({
            element: overImg,
            stopEvent: false,
            position: [lng, lat],
          });
          map.addOverlay(img_layer);

          map.on('singleclick', evt => {
            console.log(evt.coordinate[0], evt.coordinate[1]);
            let logo = document.getElementsByClassName(
              'ol-overlaycontainer'
            )[0];
            logo.innerHTML = '';
            console.log(evt.coordinate[0], evt.coordinate[1]);
            that.formItem.lng = evt.coordinate[0];
            that.formItem.lat = evt.coordinate[1];
            let overImg = document.createElement('img');
            overImg.setAttribute('src', '/static/img/gis1.png');
            let img_layer = new ol.Overlay({
              element: overImg,
              stopEvent: false,
              position: [evt.coordinate[0], evt.coordinate[1]],
            });
            map.addOverlay(img_layer);
          });
        }, 500);
      } else if (type === '2') {
        var myMap1 = document.getElementById('myMap2');
        myMap1.innerHTML = '';
        this.gateItem = row;
        this.gateModal = true;
        let lat = row.lat;
        let lng = row.lng;
        xiqiao_riverLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/xiqiao/xiqiao_small_river_partial/MapServer',
          }),
        });
        // 镇街名layer
        notionLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/notation/MapServer',
          }),
        });
        // 水网layer
        waterNetLayer = new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url:
              'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/guangdong_waterbody_entire/MapServer',
          }),
        });

        setTimeout(function () {
          map = new ol.Map({
            target: myMap1,
            layers: [waterNetLayer, notionLayer, xiqiao_riverLayer],
            view: new ol.View({
              center: [lng, lat],
              zoom: 13,
              maxZoom: 19,
              minZoom: 3,
              projection: 'EPSG:4326',
              extent: [
                109.6820068359375,
                20.264282226562504,
                116.8670654296875,
                25.3729248046875,
              ],
            }),
            controls: ol.control.defaults({
              attribution: false,
            }),
          });
          let overImg = document.createElement('img');
          overImg.setAttribute('src', '/static/img/gis1.png');
          let img_layer = new ol.Overlay({
            element: overImg,
            stopEvent: false,
            position: [lng, lat],
          });
          map.addOverlay(img_layer);

          map.on('singleclick', evt => {
            console.log(evt.coordinate[0], evt.coordinate[1]);
            let logo = document.getElementsByClassName(
              'ol-overlaycontainer'
            )[0];
            logo.innerHTML = '';
            console.log(evt.coordinate[0], evt.coordinate[1]);
            that.gateItem.lng = evt.coordinate[0];
            that.gateItem.lat = evt.coordinate[1];
            let overImg = document.createElement('img');
            overImg.setAttribute('src', '/static/img/gis1.png');
            let img_layer = new ol.Overlay({
              element: overImg,
              stopEvent: false,
              position: [evt.coordinate[0], evt.coordinate[1]],
            });
            map.addOverlay(img_layer);
          });
        }, 500);
      }
    },
    changePump(type) {
      let params = {
        data: this.formItem,
        url: this.urlPumpEdit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.pumpModal = false;
            this.getTable('1', this.actionPage);
            this.$Message.success({
              content: '修改成功',
            });
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      if (type === '2') {
        params.data = this.gateItem;
        params.url = this.urlGateEdit;
        params.success = res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.gateModal = false;
            this.getTable('2', this.actionPage);
            this.$Message.success({
              content: '修改成功',
            });
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        };
      }
      ajaxPost(params);
    },
  },
  mounted() {
    this.getTable();
  },
};
</script>
